<template>


    <el-form ref="form" :model="form" label-width="140px"
             @submit.prevent="saveOrUpdate" style="margin:20px;width:80%;min-width:600px;" v-loading="form.loading">
      <el-row style="margin-bottom: 20px">
        <el-col>
          <el-alert class="tip" title="推荐上传尺寸 10:3,图片上传大小不限，但不宜过大" type="success"></el-alert>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="首页轮播图:">
            <el-upload action="javascript:;"
                       :class="{hiddenUpload:fileUploadDisabled}"
                       list-type="picture-card"
                       :limit="10"
                       :file-list="form.fileList"
                       :on-remove="fileRemove"
                       :before-remove="beforeFileRemove"
                       :before-upload="beforeImgUpload"
                       :http-request="fileUploadFn">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-for="(item,index) in form.fileList" :key="item.url">

        <el-col :span="9">
          <el-form-item label="轮播图名称:" class="w450" style="margin-right:120px;">
            <el-input v-model="form.nameList[index]" placeholder="请输入轮播图"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="对应的跳转链接:" prop="sellPrice"  >
            <el-input v-model="form.toUrlList[index]" placeholder="请输入轮播图跳转的链接"></el-input>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :offset="8">
          <el-form-item>
            <!--<el-button type="success" @click="saveOrUpdate(1)">存为草稿并预览</el-button>-->
            <el-button type="primary" @click="save()">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

</template>

<script>
    export default {
        data() {
            return {
                loading:false,
                deleteIndex:0,
                form: {
                    nameList: [],
                    fileList:[],
                    toUrlList:[]
                },
                loading: {
                    ImgUpload: false
                }
            }
        },
        methods: {
              //上传前判断
              beforeImgUpload(file) {
                  if (file.type === "image/png" || file.type === "image/jpeg") {
                      return true;
                  }
                  this.$message.error("轮播图只能是JPG或PNG格式!");
                  return false;
              },
            //上传课程封面图
            fileUploadFn(d) {
                this.$api.file(d.file).then(d => {
                    if (d.data.code !== 0) {
                      this.$alert(d.data.msg);
                      return;
                    }
                    this.form.fileList.push({ url: d.data.data});
                });
            },
            //移除封面图
            fileRemove(file, fileList) {
                let fileLists = this.form.fileList;
                this.form.fileList = fileLists.filter(f => f.url != file.url);
                this.form.nameList.splice(this.deleteIndex,1);
                this.form.toUrlList.splice(this.deleteIndex,1);
            },
            beforeFileRemove(file,fileList){
              this.deleteIndex = fileList.indexOf(file);
            },
            //保存或者修改的方法
            save(){
                    let params = {};
                    params.nameList = this.form.nameList;
                    params.toUrlList = this.form.toUrlList;
                    params.fileList = this.form.fileList.map(function(v){return v.url;});
                    this.loading = true;
                    this.$api.saveBannerList(params).then(response=>{
                        let result = response.data;
                        if(result.code==0){
                            this.$message({  type: 'success',message: '保存成功!'});
                        }else{
                            this.$message({  type: 'error',message:response.data.msg});
                        }
                        this.loading=false;
                    });

            }
        },
        computed: {
            fileUploadDisabled:function() {
                if(this.form.coverImgs){
                    return this.form.coverImgs.length>=1;
                }else{
                    return false;
                }
            }
        },
        mounted(){

        },
      created() {
        this.form.loading = true;
        this.$api.getBannerList().then(response => {
          let result = response.data;
          if (result.code == 0) {
            let d = result.data;
            let fileList = [];
            for (let j = 0; j < d.fileList.length; j++) {
              fileList.push({url: d.fileList[j]});
            }
            this.form.fileList = fileList;
            this.form.nameList = d.nameList;
            this.form.toUrlList = d.toUrlList;
            this.form.loading = false;
          } else {
            this.form.loading = false;
            this.$message({type: 'error', message: response.data.msg});
          }
        });
      }
    }
</script>
<style lang="less">
    .hiddenUpload  .el-upload--picture-card  {
            display: none;
    }
    .w450{
        width:400px;
        display:inline-block;
    }
    .img-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        width: 178px;
        height: 178px;
        overflow: hidden;
    }
    .img-uploader .img-upload:hover {
        border-color: #409EFF;
    }
    .img-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .outimg {
        width: 178px;
        height: 178px;
        display: block;
        border: 1px dashed #d9d9d9;
        background-position:center;
        background-size:cover;
        -webkit-background-size:cover;
    }
</style>
